
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xxx</title>
    <style>
        iframe {
            position: absolute;
            left: 160px;
            width: calc(100vw - 615px);
            top: 8px;
            height: 400px;
        }
        .info {
            font-size: 12px;
            color: #999;
            width: 150px;
            margin-bottom: 6px;
        }
    </style>
</head>
<body>
    <div>
        <button onclick="clickStart()">click(<label id="guaIndex">6</label>)</button>
        <button onclick="reset()">restart</button>
    </div>
    <pre id="desc"></pre>
    <canvas width="120" height="140" id="cvs"></canvas>
    <iframe src="about:blank" id="ifr1"></iframe>
</body>
<script>
    const gData = {"100000":"%E5%9C%B0%E9%9B%B7%E5%A4%8D","100001":"%E5%B1%B1%E9%9B%B7%E9%A2%90","100010":"%E6%B0%B4%E9%9B%B7%E5%B1%AF","100011":"%E9%A3%8E%E9%9B%B7%E7%9B%8A","100100":"%E9%9C%87%E4%B8%BA%E9%9B%B7","100101":"%E7%81%AB%E9%9B%B7%E5%99%AC%E5%97%91","100110":"%E6%B3%BD%E9%9B%B7%E9%9A%8F","100111":"%E5%A4%A9%E9%9B%B7%E6%97%A0%E5%A6%84","101000":"%E5%9C%B0%E7%81%AB%E6%98%8E%E5%A4%B7","101001":"%E5%B1%B1%E7%81%AB%E8%B4%B2","101010":"%E6%B0%B4%E7%81%AB%E6%97%A2%E6%B5%8E","101011":"%E9%A3%8E%E7%81%AB%E5%AE%B6%E4%BA%BA","101100":"%E9%9B%B7%E7%81%AB%E4%B8%B0","101101":"%E7%A6%BB%E4%B8%BA%E7%81%AB","101110":"%E6%B3%BD%E7%81%AB%E9%9D%A9","101111":"%E5%A4%A9%E7%81%AB%E5%90%8C%E4%BA%BA","110000":"%E5%9C%B0%E6%B3%BD%E4%B8%B4","110001":"%E5%B1%B1%E6%B3%BD%E6%8D%9F","110010":"%E6%B0%B4%E6%B3%BD%E8%8A%82","110011":"%E9%A3%8E%E6%B3%BD%E4%B8%AD%E5%AD%9A","110100":"%E9%9B%B7%E6%B3%BD%E5%BD%92%E5%A6%B9","110101":"%E7%81%AB%E6%B3%BD%E7%9D%BD","110110":"%E5%85%91%E4%B8%BA%E6%B3%BD","110111":"%E5%A4%A9%E6%B3%BD%E5%B1%A5","111000":"%E5%9C%B0%E5%A4%A9%E6%B3%B0","111001":"%E5%B1%B1%E5%A4%A9%E5%A4%A7%E7%95%9C","111010":"%E6%B0%B4%E5%A4%A9%E9%9C%80","111011":"%E9%A3%8E%E5%A4%A9%E5%B0%8F%E7%95%9C","111100":"%E9%9B%B7%E5%A4%A9%E5%A4%A7%E5%A3%AE","111101":"%E7%81%AB%E5%A4%A9%E5%A4%A7%E6%9C%89","111110":"%E6%B3%BD%E5%A4%A9%E5%A4%AC","111111":"%E4%B9%BE%E4%B8%BA%E5%A4%A9","011111":"%E5%A4%A9%E9%A3%8E%E5%A7%A4","001111":"%E5%A4%A9%E5%B1%B1%E9%81%81","000111":"%E5%A4%A9%E5%9C%B0%E5%90%A6","000011":"%E9%A3%8E%E5%9C%B0%E8%A7%82","000001":"%E5%B1%B1%E5%9C%B0%E5%89%A5","000101":"%E7%81%AB%E5%9C%B0%E6%99%8B","010010":"%E5%9D%8E%E4%B8%BA%E6%B0%B4","010000":"%E5%9C%B0%E6%B0%B4%E5%B8%88","001001":"%E8%89%AE%E4%B8%BA%E5%B1%B1","001011":"%E9%A3%8E%E5%B1%B1%E6%B8%90","000100":"%E9%9B%B7%E5%9C%B0%E8%B1%AB","010100":"%E9%9B%B7%E6%B0%B4%E8%A7%A3","011100":"%E9%9B%B7%E9%A3%8E%E6%81%92","011000":"%E5%9C%B0%E9%A3%8E%E5%8D%87","011010":"%E6%B0%B4%E9%A3%8E%E4%BA%95","011110":"%E6%B3%BD%E9%A3%8E%E5%A4%A7%E8%BF%87","011011":"%E5%B7%BD%E4%B8%BA%E9%A3%8E","011001":"%E5%B1%B1%E9%A3%8E%E8%9B%8A","001101":"%E7%81%AB%E5%B1%B1%E6%97%85","011101":"%E7%81%AB%E9%A3%8E%E9%BC%8E","010101":"%E6%B0%B4%E7%81%AB%E6%9C%AA%E6%B5%8E","010001":"%E5%B1%B1%E6%B0%B4%E8%92%99","010011":"%E9%A3%8E%E6%B0%B4%E6%B6%A3","010111":"%E5%A4%A9%E6%B0%B4%E8%AE%BC","000000":"%E5%9D%A4%E4%B8%BA%E5%9C%B0","000010":"%E6%B0%B4%E5%9C%B0%E6%AF%94","010110":"%E6%B3%BD%E6%B0%B4%E5%9B%B0","000110":"%E6%B3%BD%E5%9C%B0%E8%90%83","001110":"%E6%B3%BD%E5%B1%B1%E5%92%B8","001010":"%E6%B0%B4%E5%B1%B1%E8%B9%87","001000":"%E5%9C%B0%E5%B1%B1%E8%B0%A6","001100":"%E9%9B%B7%E5%B1%B1%E5%B0%8F%E8%BF%87"}
    const cvs = document.getElementById('cvs')
    const ctx = cvs.getContext('2d')
    const guaIndexEl = document.getElementById('guaIndex')
    const descEl = document.getElementById('desc')
    const ifr1 = document.getElementById('ifr1')
    const {width, height} = cvs
    let guaIndex = +guaIndexEl.innerHTML
    let result = []
    const getRes = () => {
        const a = Math.random() > 0.5 ? 3 : 2
        const b = Math.random() > 0.5 ? 3 : 2
        const c = Math.random() > 0.5 ? 3 : 2
        descEl.innerHTML = `${a === 3 ? '阳':'阴'}\t${b === 3 ? '阳':'阴'}\t${c === 3 ? '阳':'阴'}`
        return a + b + c
    }
    const clickStart = () => {
        if (guaIndex > 0) {
            guaIndex--
            result.push(getRes())
            guaIndexEl.innerHTML = guaIndex
            render()
            if (guaIndex === 0) {
                const name = gData[result.map(v => (v === 6 || v === 8) ? 0 : 1).join('')]
                descEl.innerHTML = `name：${decodeURIComponent(name)}`
                ifr1.src = `https://baike.baidu.com/item/${name}?fromModule=lemma_search-box`
            }
        }
    }
    const reset = () => {
        guaIndex = 6
        guaIndexEl.innerHTML = guaIndex
        descEl.innerHTML = ''
        result = []
        ifr1.src = `about:blank`
        ctx.clearRect(0, 0, cvs.width, cvs.height)
    }
    const render = () => {
        const bl = 2
        cvs.style.width = width + 'px'
        cvs.style.height = height + 'px'
        cvs.width = width * 2
        cvs.height = height * 2
        ctx.clearRect(0, 0, cvs.width, cvs.height)
        ctx.beginPath()
        let x = 10 * bl
        let w1 = 40 * bl
        let space = 8 * bl
        let w2 = w1 * 2 + space
        let h = 20 * bl
        ctx.lineWidth = h / 2
        ctx.textBaseline = 'middle'
        ctx.font = 16 * bl + 'px bold'
        result.forEach((v, i) => {
            const y = (result.length - i) * h
            ctx.fillText(v, x + w2 + 10, y)
            if (v === 6 || v === 8) {
                ctx.moveTo(x, y)
                ctx.lineTo(x + w1, y)
                ctx.moveTo(x + w1 + space, y)
                ctx.lineTo(x + w1 + space + w1, y)
            } else if (v === 7 || v === 9) {
                ctx.moveTo(x, y)
                ctx.lineTo(x + w2, y)
            }
        })
        ctx.stroke()
    }
</script>
</html>
